import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { 
  LayoutDashboard, 
  ScanLine, 
  Settings, 
  Bell, 
  ChevronRight, 
  ShieldCheck, 
  Box
} from 'lucide-react';
import { TASKS } from '../services/mockService';

interface LayoutProps {
  children: React.ReactNode;
}

export const Layout: React.FC<LayoutProps> = ({ children }) => {
  const location = useLocation();

  const isActive = (path: string) => location.pathname === path || location.pathname.startsWith(`${path}/`);

  return (
    <div className="flex h-screen w-full overflow-hidden bg-slate-50 text-slate-800 font-sans">
      {/* Sidebar */}
      <aside className="w-64 flex-shrink-0 border-r border-slate-200 bg-white/80 backdrop-blur-lg flex flex-col shadow-sm z-10">
        <div className="h-16 flex items-center px-6 border-b border-slate-100">
          <div className="flex items-center gap-2 text-indigo-600">
            <div className="bg-indigo-600 p-1.5 rounded-lg">
                <ShieldCheck className="w-5 h-5 text-white" />
            </div>
            <span className="text-lg font-bold tracking-tight text-slate-800">QualiBoard</span>
          </div>
        </div>

        <div className="flex-1 overflow-y-auto py-6 px-3 space-y-1">
          <p className="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Overview</p>
          
          <Link
            to="/"
            className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group ${
              isActive('/') && location.pathname === '/'
                ? 'bg-indigo-50 text-indigo-700 shadow-sm ring-1 ring-indigo-100'
                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
            }`}
          >
            <LayoutDashboard className="w-4 h-4" />
            Dashboard
          </Link>

          <div className="pt-4 pb-2">
            <p className="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Scan Tasks</p>
            {TASKS.map(task => (
              <Link
                key={task.id}
                to={`/task/${task.id}`}
                className={`flex items-center justify-between px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 mb-1 group ${
                  isActive(`/task/${task.id}`)
                    ? 'bg-white text-indigo-600 shadow-md shadow-indigo-100 border border-indigo-50'
                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
                }`}
              >
                <div className="flex items-center gap-3">
                  {task.type.includes('HARMONY') ? <Box className="w-4 h-4 text-teal-500"/> : 
                   task.type.includes('ARKTS') ? <ScanLine className="w-4 h-4 text-rose-500"/> : 
                   <Box className="w-4 h-4 text-amber-500"/>}
                  <span className="truncate max-w-[140px]">{task.name}</span>
                </div>
                {isActive(`/task/${task.id}`) && <ChevronRight className="w-3 h-3 text-indigo-400" />}
              </Link>
            ))}
          </div>
        </div>

        <div className="p-4 border-t border-slate-100">
           <button className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-500 hover:text-slate-800 w-full transition-colors">
              <Settings className="w-4 h-4" />
              Settings
           </button>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
        {/* Header */}
        <header className="h-16 border-b border-slate-200 bg-white/60 backdrop-blur-sm flex items-center justify-between px-8 sticky top-0 z-20">
          <div className="flex items-center gap-2 text-sm text-slate-400">
             <span className="hover:text-slate-600 cursor-pointer">Home</span>
             {location.pathname !== '/' && (
                 <>
                    <ChevronRight className="w-4 h-4" />
                    <span className="font-medium text-slate-800 capitalize">{location.pathname.split('/')[1]}</span>
                 </>
             )}
          </div>
          <div className="flex items-center gap-4">
            <button className="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-full transition-colors relative">
               <Bell className="w-5 h-5" />
               <span className="absolute top-2 right-2 w-2 h-2 bg-rose-500 rounded-full border-2 border-white"></span>
            </button>
            <div className="h-8 w-8 rounded-full bg-gradient-to-br from-indigo-400 to-purple-400 border-2 border-white shadow-sm cursor-pointer"></div>
          </div>
        </header>

        <div className="flex-1 overflow-y-auto scroll-smooth p-8">
            <div className="max-w-7xl mx-auto">
              {children}
            </div>
        </div>
      </main>
    </div>
  );
};